<template>
  <div>
    <!-- 早期的获取DOM元素的方式，通过指定id -->
    <!-- <h1 v-text="msg" id="title"></h1> -->

    <!-- VUE提供的方式，组件中的this指向VC，将其放入 $refs 中 -->
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showMsg" ref="btn">点我输出上方的DOM元素</button>

    <!-- 重要，如果是子组件加ref，会拿到组件的VC对象，这点是id无法办到的 -->
    <School ref="sch"/>
  </div>
</template>

<script>
//1：引入School组件
import School from "./components/School.vue";
export default {
  name: "App",
  components: { School },
  data() {
    return {
      msg: "欢迎学习Vue",
    };
  },
  methods: {
    showMsg() {
      //早期获取真实DOM元素方式，通过document获取指定id的元素
      //console.log(document.getElementById("title"));

      //从VC中获取真实DOM元素，通过$ref加元素名(存储为对象格式)
      console.log(this.$refs.title);
      console.log(this.$refs.btn);
      
      //如果是组件，可以拿到VC属性后续使用，id则只会获取组件真实DOM，这是两者最大区别
      console.log(this.$refs.sch);
    },
  },
};
</script>

<style>
</style>